<template>
  <div>
    <q-btn flat dense round color="grey-8" icon="more_vert">
      <q-popover>
        <q-list link class="text-grey-8" style="min-width: 160px">
          <q-item v-for="item in menu"  @click.native="item.action(instance)" v-if="getVisible(item, instance)"
            :key="item.name"
            class="size-14" v-close-overlay :separator="item.separator">
            <div class="col">{{ item.name }}</div>
            <q-icon v-if="item.icon" :name="item.icon"/>
          </q-item>
        </q-list>
      </q-popover>
    </q-btn>
  </div>
</template>

<script>
    export default {
      name: 'aPopoverMenu',
      props: {
        menu: Array,
        instance: Object
      },
      data () {
        return {
        }
      },
      computed: {
      },
      watch: {
      },
      methods: {
        getVisible(item, instance){
          const visible = item.visible

          if (visible === undefined){
            return true
          }

          if (visible instanceof Function){
            return visible(instance)
          }

          return !!visible
        }
      }
    }
</script>

<style lang="stylus">
</style>
